<template>
    <div class="card platform-statistics">
        <img src="@/assets/images/workbench/img_circle.png" class="img1" />
        <img src="@/assets/images/workbench/img_r.png" class="img2" />
        <flexbox justify="center" class="card-header" style="background: #fff">
            <flexbox orient="vertical" align="center">
                <span class="title">平台统计</span>
                <span class="sub-title">Platform statistics</span>
            </flexbox>
        </flexbox>
        <div class="card-cont">
            <a-row>
                <a-col :span="12">
                    <require-total-chart />
                </a-col>
                <a-col :span="12">
                    <avg-time-chart />
                </a-col>
            </a-row>
        </div>
    </div>
</template>

<script lang="ts">
import requireTotalChart from './requireTotalChart.vue';
import avgTimeChart from './avgTimeChart.vue';
import { defineComponent, ref } from 'vue';
import Flexbox from '@/components/Flexbox/Flexbox.vue';
export default defineComponent({
    components: {
        requireTotalChart,
        avgTimeChart,
        Flexbox
    },
    setup() {
        const chartRef = ref<any>();
        return {
            chartRef
        };
    }
});
</script>

<style scoped lang="less">
@import '../../style';
.img1 {
    position: absolute;
    top: 0px;
    left: 24px;
}
.img2 {
    position: absolute;
    top: 0;
    right: 0;
}
</style>